<template>
	<div>
		<el-card>
			<el-table :data="allPermission" style="width: 100%;" border row-key="id" default-expand-all
				:tree-props="{chiildren: 'children', hasChildren: 'hasChildren'}">
				<el-table-column width="180" prop="permissionName" :label="$t('msg.permission.name')"></el-table-column>
				<el-table-column width="180" prop="permissionMark" :label="$t('msg.permission.mark')"></el-table-column>
				<el-table-column prop="permissionDesc" :label="$t('msg.permission.desc')"></el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script setup>
	import {
		permissionList
	} from '@/api/permission'
	import {
		watchSwitchLang
	} from '@/utils/i18n'
	import {
		ref
	} from 'vue'

	const allPermission = ref([])

	const getPermissionList = async () => {
		allPermission.value = await permissionList()
	}

	getPermissionList()
	watchSwitchLang(getPermissionList)
</script>

<style lang="scss" scoped>
</style>
